import React, { Component } from 'react';
// 验证码组件
// 01:请求验证码.验证码请求需要引入axios
// 02:该组件必须接受一个saveKey方法参数

import axios from 'axios';
// 引入属性校验规则模块
import Pts from 'prop-types'

class Captcha extends Component {
    // 定义默认参数
    static defaultProps = {
        w: '126px',
        h: '36px'
    }
    state = {
        url: '', // 验证码地址
    }
    // 定义属性类型约束规则
    static propTypes = {
        saveKey: Pts.func.isRequired
    }
    // 定义axios 请求对象
    source = axios.CancelToken.source()
    render() {
        const { url } = this.state
        return (
            <div>
                <img src={url} alt="验证码" title='点击切换' width={this.props.w} height={this.props.h} onClick={this.changeCaptcha} />
            </div>
        );
    }
    componentDidMount() {
        // 初始化请求
        this.loadCaptcha()
    }
    loadCaptcha() {
        axios.get('https://reactapi.iynn.cn/captcha/api/math', {
            cancelToken: this.source.token
        }).then(res => {
            this.setState({
                url: res.data.img,
                key: res.data.key
            }, () =>
                // 将key存到父组件中(子传父知识点,接受一个saveKey方法参数)
                this.props.saveKey(res.data.key)
            )

        }).catch((e) => { })
    }
    // 点击切换验证码
    changeCaptcha = () => {
        // 调用
        this.loadCaptcha()
    }
    // 组件卸载的时候
    componentWillUnmount() {
        this.source.cancel()
    }
}

export default Captcha;
